<template>
  <div class="overView">
    <div class="all-data">
      <div class="content">
        <div
          class="box temp"
          @click="selectTypeFun('ROBOT_TEMPERATURE')"
          :class="selectType.temp ? 'select-temp' : ''"
        >
          <div class="flex">
            <div class="name">温度</div>
            <div class="img">
              <img
                src="@/assets/platformDetail/temp_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
        <div
          class="box hum"
          @click="selectTypeFun('ROBOT_HUMIDITY')"
          :class="selectType.hum ? 'select-hum' : ''"
        >
          <div class="flex">
            <div class="name">湿度</div>
            <div class="img">
              <img
                src="@/assets/platformDetail/hum_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
        <div
          class="box pm25"
          @click="selectTypeFun('ROBOT_PM25')"
          :class="selectType.pm25 ? 'select-pm25' : ''"
        >
          <div class="flex">
            <div class="name">PM2.5</div>
            <div class="img">
              <img
                src="@/assets/platformDetail/pm25_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
        <div
          class="box co2"
          @click="selectTypeFun('ROBOT_CO2')"
          :class="selectType.co2 ? 'select-co2' : ''"
        >
          <div class="flex">
            <div class="name">CO<sub>2</sub></div>
            <div class="img">
              <img
                src="@/assets/platformDetail/co2_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
        <div
          class="box illuminance"
          @click="selectTypeFun('ROBOT_LUX')"
          :class="selectType.illuminance ? 'select-illuminance' : ''"
        >
          <div class="flex">
            <div class="name">照度</div>
            <div class="img">
              <img
                src="@/assets/platformDetail/illuminance_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="map-info">
        <el-form :model="searchForm" :inline="true" size="small">
          <el-form-item label="重建算法:">
            <el-select v-model="searchForm.type">
              <el-option
                v-for="item in cjsfList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="色彩模式:">
            <el-select v-model="searchForm.scms">
              <el-option
                v-for="item in scmsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <template #label>
              <span>详情查看:</span>
            </template>
            <el-switch
              v-model="searchForm.xqck"
              class="main-el-switch"
              :inline-prompt="true"
              active-text="ON"
              inactive-text="OFF"
            ></el-switch>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="label-flex">
                <img src="@/assets/scenePlatformDetail/robot.png" />
                <span>机器人轨迹:</span>
              </div>
            </template>
            <el-switch
              v-model="searchForm.jqrgj"
              class="main-el-switch"
              :inline-prompt="true"
              active-text="ON"
              inactive-text="OFF"
              @change="getDataFun"
            ></el-switch>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="label-flex">
                <img src="@/assets/scenePlatformDetail/caiyang.png" />
                <span>移动采样点:</span>
              </div>
            </template>
            <el-switch
              v-model="searchForm.ydcyd"
              class="main-el-switch"
              :inline-prompt="true"
              active-text="ON"
              inactive-text="OFF"
            ></el-switch>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="label-flex">
                <img src="@/assets/scenePlatformDetail/ding.png" />
                <span>固定监测点:</span>
              </div>
            </template>
            <el-switch
              v-model="searchForm.gdjcd"
              class="main-el-switch"
              :inline-prompt="true"
              active-text="ON"
              inactive-text="OFF"
              @change="getDataFun"
            ></el-switch>
          </el-form-item>
        </el-form>
        <div v-loading="loading" style="width: 100%">
          <div
            v-show="!errEchart"
            class="box"
            style="width: 100%; height: 450px"
            :id="chartId"
          ></div>
          <el-empty
            v-show="errEchart"
            description="没有发现场图相关数据"
          ></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ding from "@/assets/scenePlatformDetail/ding.png";
import robot from "@/assets/scenePlatformDetail/robot.png";
import moment from "moment";
import {
  moment as momentApi,
  period,
  properties,
  onlineRate,
  robotRoute,
} from "@/api/sceneManage";
import { getAllDeviceDataRealtime } from "@/api/platformManage";
import * as echarts from "echarts";
export default {
  name: "overView",
  props: {
    fieldPatternId: {
      type: String,
      default: "",
    },
    ts: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      monitorPointName: [],
      monitorPointSate: [],
      robotRouteData: [],
      selectType: {},
      cjsfList: [
        { name: "空间插值", id: "RBF" },
        { name: "时空插值", id: "RCF" },
        { name: "2D-kernel方法", id: "RDF" },
      ],
      scmsList: [
        { name: "全部显示", id: 1 },
        { name: "超标显示", id: 2 },
      ],
      temp: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      hum: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      co2: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      pm25: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      illuminance: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      searchForm: {},
      loading: false,
      errEchart: false,
      chartId: "chart",
      myChart: null,
      echartTime: 0,
      chartData: [],
      timer: null,
      typeList: [
        "ROBOT_TEMPERATURE",
        "ROBOT_HUMIDITY",
        "ROBOT_PM25",
        "ROBOT_CO2",
        "ROBOT_LUX",
      ],
    };
  },
  filters: {
    tempLevelFil(level) {
      switch (level) {
        case "适宜":
          return "level-a";
        case "偏冷":
          return "level-c";
        case "偏热":
          return "level-d";
        default:
          return "";
      }
    },
    humLevelFil(level) {
      switch (level) {
        case "适宜":
          return "level-a";
        case "微湿":
          return "level-c";
        case "高湿":
          return "level-yellow";
        case "干燥":
          return "level-d";
        default:
          return "";
      }
    },
    co2LevelFil(level) {
      switch (level) {
        case "LEVEL_A":
          return "level-a";
        case "LEVEL_B":
          return "level-b";
        case "LEVEL_C":
          return "level-c";
        case "LEVEL_D":
          return "level-yellow";
        case "LEVEL_E":
          return "level-e";
        case "LEVEL_F":
          return "level-f";
        default:
          return "";
      }
    },
    pm25LevelFil(level) {
      switch (level) {
        case "LEVEL_A":
          return "level-a";
        case "LEVEL_B":
          return "level-b";
        case "LEVEL_C":
          return "level-yellow";
        case "LEVEL_D":
          return "level-d";
        case "LEVEL_E":
          return "level-e";
        case "LEVEL_F":
          return "level-f";
        default:
          return "";
      }
    },
    pm10LevelFil(level) {
      switch (level) {
        case "LEVEL_A":
          return "level-a";
        case "LEVEL_B":
          return "level-b";
        case "LEVEL_C":
          return "level-yellow";
        case "LEVEL_D":
          return "level-d";
        case "LEVEL_E":
          return "level-e";
        case "LEVEL_F":
          return "level-f";
        default:
          return "";
      }
    },
  },
  watch: {
    // fieldPatternId(newVal) {
    //   if (newVal) {
    //     this.selectTypeFun("ROBOT_TEMPERATURE", true);
    //   }
    // },
    // ts(newVal){
    //     this.selectTypeFun("ROBOT_TEMPERATURE", true);
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.selectTypeFun("ROBOT_TEMPERATURE", true);
      this.setLoopFun();
    });
  },
  methods: {
    setLoopFun() {
      let i = 0;
      this.timer = setInterval(() => {
        if (i < this.typeList.length - 1) {
          i = i + 1;
        } else {
          i = 0;
        }
        this.selectTypeFun(this.typeList[i], true);
      }, 1000 * 60);
    },
    selectTypeFun(type, loop = false) {
      if (!loop) {
        this.timer = null;
      }
      this.$emit("changeRobotType", type);
      this.searchForm.dataType = type;
      this.selectType = {};
      let that = this;
      switch (type) {
        case "ROBOT_TEMPERATURE":
          that.selectType.temp = true;
          break;
        case "ROBOT_HUMIDITY":
          that.selectType.hum = true;
          break;
        case "ROBOT_CO2":
          that.selectType.co2 = true;

          break;
        case "ROBOT_LUX":
          that.selectType.illuminance = true;

          break;
        case "ROBOT_PM25":
          that.selectType.pm25 = true;

          break;

        default:
          break;
      }
      this.getDataFun();
    },
    setChart(chartData, searchForm, svg, resolution) {
      const _this = this;
      if (
        _this.myChart != null &&
        _this.myChart != "" &&
        _this.myChart != undefined
      ) {
        _this.myChart.dispose(); //销毁
      }
      _this.myChart = echarts.init(document.getElementById(this.chartId), {
        renderer: "svg",
      });
      let minValue = 0;
      let maxValue = 10;
      let month = moment(_this.echartTime).month() + 1;
      let text = [];
      let units = "℃";
      let color = ["#7f00ff", "#00b4eb", "#80feb3", "#ffb260", "#ff0000"];
      let continuous_right = 35;
      let categories = ["28℃", "27℃", "26℃", "25℃", "24℃"];
      let piecewise_color = [
        "#000000",
        "#000000",
        "#000000",
        "#000000",
        "#000000",
      ];
      let itemGap = 46;
      switch (_this.searchForm.dataType) {
        case "ROBOT_TEMPERATURE":
          minValue = month <= 9 && month >= 5 ? 24 : 18;
          maxValue = month >= 11 || month <= 3 ? 24 : 28;
          text = [`${maxValue}℃`, `${minValue}℃`];
          units = "℃";
          continuous_right = 35;
          if (month <= 9 && month >= 5) {
            //夏季
            color = ["#7f00ff", "#00b4eb", "#80feb3", "#ffb260", "#ff0000"];
            categories = ["28℃", "27℃", "26℃", "25℃", "24℃"];
            piecewise_color = [
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
            ];
            itemGap = 75;
          } else if (month >= 11 || month <= 3) {
            //冬季
            color = [
              "#7f00ff",
              "#2b7ef6",
              "#2adcdc",
              "#80feb3",
              "#d4dc7f",
              "#ff7e41",
              "#ff0000",
            ];
            categories = ["24℃", "23℃", "22℃", "21℃", "20℃", "19℃", "18℃"];
            piecewise_color = [
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
            ];
            itemGap = 46;
          } else {
            //过渡季
            color = [
              "#7f00ff",
              "#1995f2",
              "#4cf2ce",
              "#b2f295",
              "#ff954e",
              "#ff0000",
            ];
            categories = ["28℃", "26℃", "24℃", "22℃", "20℃", "18℃"];
            piecewise_color = [
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
            ];
            itemGap = 57.5;
          }
          break;
        case "ROBOT_HUMIDITY":
          minValue = month <= 9 && month >= 5 ? 40 : 30;
          maxValue = month <= 9 && month >= 5 ? 70 : 60;
          text = [`${maxValue}%`, `${minValue}%`];
          units = "%";
          continuous_right = 35;
          if (month <= 9 && month >= 5) {
            //夏季
            color = ["#7f00ff", "#2adcdc", "#d4dc7f", "#ff0000"];
            categories = ["70%", "60%", "50%", "40%"];
            piecewise_color = ["#000000", "#000000", "#000000", "#000000"];
            itemGap = 104;
          } else {
            //过渡季&冬季
            color = ["#7f00ff", "#2adcdc", "#d4dc7f", "#ff0000"];
            categories = ["60%", "50%", "40%", "30%"];
            piecewise_color = ["#000000", "#000000", "#000000", "#000000"];
            itemGap = 104;
          }
          break;
        case "ROBOT_PM25":
          minValue = 35;
          maxValue = 75;
          text = [`${maxValue}µg/m³`, `${minValue}µg/m³`];
          units = "µg/m³";
          continuous_right = 59;
          color = ["#7f00ff", "#00b4eb", "#80feb3", "#ffb260", "#ff0000"];
          categories = ["75µg/m³", "65µg/m³", "55µg/m³", "45µg/m³", "35µg/m³"];
          piecewise_color = [
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
          ];
          itemGap = 75;
          break;
        case "ROBOT_CO2":
          minValue = 400;
          maxValue = 1000;
          text = [`${maxValue}ppm`, `${minValue}ppm`];
          units = "ppm";
          continuous_right = 63;
          color = [
            "#7f00ff",
            "#2b7ef6",
            "#2adcdc",
            "#80feb3",
            "#d4dc7f",
            "#ff7e41",
            "#ff0000",
          ];
          categories = [
            "1000ppm",
            "900ppm",
            "800ppm",
            "700ppm",
            "600ppm",
            "500ppm",
            "400ppm",
          ];
          piecewise_color = [
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
          ];
          itemGap = 46;
          break;
        case "ROBOT_LUX":
          minValue = 300;
          maxValue = 1500;
          text = [`${maxValue}lx`, `${minValue}lx`];
          units = "lx";
          continuous_right = 47;
          color = [
            "#7f00ff",
            "#2b7ef6",
            "#2adcdc",
            "#80feb3",
            "#d4dc7f",
            "#ff7e41",
            "#ff0000",
          ];
          categories = [
            "1500lx",
            "1300lx",
            "1100lx",
            "900lx",
            "700lx",
            "500lx",
            "300lx",
          ];
          piecewise_color = [
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
          ];
          itemGap = 46;
          break;
        default:
          return "";
      }

      this.$store.commit("user/categoriesMuts", { minValue, maxValue, units });
      echarts.registerMap("bgImg", {
        svg: svg,
      }); //这里的factoryDrawing必须要和geo里面的map值统一
      let option = {
        tooltip: {
          show: true,
          triggerOn: "mousemove", // 只做鼠标悬浮效果
          formatter: function (params) {
            switch (_this.searchForm.dataType) {
              case "ROBOT_TEMPERATURE":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
            X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            温度：${params.value[2].toFixed(1)}℃`;
              case "ROBOT_HUMIDITY":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
          X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            湿度：${Math.round(params.value[2])}%`;
              case "ROBOT_PM25":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
            X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            PM2.5: ${Math.round(params.value[2])}ug/m³`;
              case "ROBOT_CO2":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
          X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            CO2：${Math.round(params.value[2])}ppm`;
              case "ROBOT_LUX":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
          X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            照度：${Math.round(params.value[2])}lx`;

              default:
                return "";
            }
          },
        },
        geo: {
          name: "bgImg",
          map: "bgImg",
          show: true,
          selectedMode: false,
          left: 0,
          right: 120,
        },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "geo",
            data: null,
            markPoint: "none",
            // color:"inherit",
          },
          {
            // emphasis: {
            //   scale: 3,
            // },
            symbol: "rect",
            coordinateSystem: "geo",
            symbolSize: 5,
            data: chartData,
            cursor: "crosshair",
            itemStyle: {
              color: function (params) {
                // if (params.value[2] > 29.5 && params.value[2] < 30) {
                //   return "rgba(255,255,255,1)";
                // } else {
                return "rgba(255,255,255,0)";
                // }
              },
            },
            type: "scatter",
          },
          {
            symbol: "circle",
            xAxisIndex: 1,
            yAxisIndex: 1,
            coordinateSystem: "geo",
            symbolSize: 10,
            geoIndex: 0,
            data: [[0, 0, 0]],
            cursor: "pointer",
            color: "#007aff",
            type: "scatter",
          },
        ],
        visualMap: [
          {
            type: "piecewise",
            min: minValue,
            max: maxValue,
            right: "0",
            bottom: "middle",
            seriesIndex: 0,
            xAxisIndex: 0,
            yAxisIndex: 0,
            calculable: true,
            realtime: false,
            itemWidth: 4,
            itemHeight: 1,
            categories: categories,
            align: "left",
            itemGap: itemGap, //每两个图元之间的间隔距离，单位为px。
            textGap: 5, //每项的色块与文本标签之间的距离，单位为px。
            color: piecewise_color,
          },
          {
            type: "continuous",
            min: minValue,
            max: maxValue,
            orient: "vertical",
            right: continuous_right,
            bottom: "middle",
            inverse: false,
            //text,
            animation: false,
            itemHeight: "350",
            seriesIndex: 0,
            //自定义热力图颜色
            controller: {
              inRange: {
                color: color,
              },
            },
            outOfRange: {
              color: ["rgba(255,255,255,0)"],
            },
            formatter: function (value) {
              return value.toFixed(0) + units; // 范围标签显示内容。
            },
          },
        ],
      };
      //固定采样点
      if (this.searchForm.gdjcd) {
        option.series.push({
          symbol: "image://" + ding,
          xAxisIndex: 1,
          yAxisIndex: 1,
          coordinateSystem: "geo",
          symbolSize: ["10", "10"],
          geoIndex: 0,
          data: this.monitorPointSate,
          cursor: "pointer",
          color: "#007aff",
          type: "scatter",
          tooltip: {
            show: true,
            // triggerOn: "mousemove", // 只做鼠标悬浮效果
            formatter: `{b0}`,
          },
        });
      }
      //机器人轨迹
      if (this.searchForm.jqrgj) {
        for (let i = 0; i < this.robotRouteData.length; i++) {
          let _robotRouteData = this.robotRouteData[i];
          option.series.push({
            name: "Route",
            type: "lines",
            coordinateSystem: "geo",
            geoIndex: 0,
            emphasis: {
              label: {
                show: false,
              },
            },
            polyline: true,
            lineStyle: {
              color: "#c46e54",
              width: 0,
            },
            effect: {
              show: true,
              period: 8,
              color: "#a10000",
              // constantSpeed: 80,
              trailLength: 0,
              symbolSize: [8, 11],
              symbol:
                "path://M87.1667 3.8333L80.5.5h-60l-6.6667 3.3333L.5 70.5v130l10 10h80l10 -10v-130zM15.5 190.5l15 -20h40l15 20zm75 -65l-15 5v35l15 15zm-80 0l15 5v35l-15 15zm65 0l15 -5v-40l-15 20zm-50 0l-15 -5v-40l15 20zm 65,-55 -15,25 c -15,-5 -35,-5 -50,0 l -15,-25 c 25,-15 55,-15 80,0 z",
            },
            z: 100,
            data: [
              {
                effect: {
                  color: "#a10000",
                  constantSpeed: 50,
                  delay: 0,
                },
                coords: _robotRouteData,
              },
            ],
          });
        }
      }
      this.myChart.setOption(option);
      this.$nextTick(() => {
        this.myChart?.resize();
      });
    },
    getDataFun() {
      let _this = this;
      let { dataType, type } = { ...this.searchForm };
      let data = {
        fieldPatternId: this.fieldPatternId,
        //ts: this.ts,
        ts: new Date().getTime(),
        dataType,
        svg: true,
        type,
      };
      this.loading = true;
      properties({ fieldPatternId: _this.fieldPatternId }).then((res) => {
        this.resolution = res.value.resolution;
        momentApi(data)
          .then((res) => {
            this.loading = false;
            this.errEchart = false;
            let resData = res.data;
            this.$store.commit("user/sceneDataMuts", resData);
            let imgKey = res.fieldMapKey;
            let svg = res.svg;
            _this.echartTime = this.ts;
            _this.chartData = [];
            for (let i = 0; i < resData.length; i++) {
              const element = resData[i];
              let arr = [];
              arr.push(element.x);
              arr.push(element.y);
              arr.push(element.val);
              _this.chartData.push(arr);
            }
            onlineRate(data).then((res) => {
              let value = res.value;
              this.monitorPointName = value.map((e) => {
                return e.point;
              });
              this.monitorPointSate = value.map((e) => {
                return {
                  name: e.point,
                  value: [e.coordinate.x / 10, e.coordinate.y / 10],
                };
              });
              // _this.$nextTick(() => {
              //   _this.setChart(
              //     _this.chartData,
              //     _this.searchForm,
              //     svg,
              //     _this.resolution
              //   );
              // });
              let robotRouteData = {
                fieldPatternId: _this.fieldPatternId,
                start: _this.ts - 3600000 * 6,
                end: _this.ts,
              };
              this.robotRouteData = [];
              robotRoute(robotRouteData).then((res) => {
                for (let i = 0; i < res.value.length; i++) {
                  const ele = res.value[i];
                  let resData = ele.data.map((e) => {
                    return [e.val.x * 10, e.val.y * 10];
                  });
                  this.robotRouteData.push(resData);
                }
                _this.$nextTick(() => {
                  _this.setChart(
                    _this.chartData,
                    _this.searchForm,
                    svg,
                    _this.resolution
                  );
                });
              });
            });
          })
          .catch((err) => {
            this.loading = false;
            this.errEchart = true;
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .clearPadding .vxe-cell {
  padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
  padding-left: 0px;
}
::v-deep {
  .main-el-switch {
    padding: 0px;
    position: relative;
    .el-switch__core {
      width: 60px !important;
      height: 24px;
      border-radius: 2px;
      &:after {
        left: 1px;
        top: 1px;
        height: 20px;
        width: 20px;
      }
    }
    .el-switch__core:after {
      border-radius: 2px;
      margin: 0px;
    }
    &.el-switch {
      &.is-checked {
        .el-switch__core {
          &:after {
            left: 100%;
            margin-left: -21px;
            height: 20px;
            width: 20px;
          }
        }
      }
    }
    &.is-checked {
      .el-switch__label--left {
        opacity: 0;
      }
      .el-switch__label--right {
        opacity: 1;
      }
    }
    .el-switch__label {
      position: absolute;
      top: 0;
    }
    .el-switch__label--left {
      right: 0;
      color: #999;
      z-index: 1;
      // margin-right: 8px;
    }
    .el-switch__label--right {
      left: 0;
      color: #fff;
      opacity: 0;
      // margin-left: 8px;
    }
  }
}
</style>
<style lang="scss" scoped>
.overView {
  width: 100%;
  padding: 20px 10px 0 10px;
  
}
.all-data {
  .title {
    font-family: "Microsoft YaHei";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
  }
  .content {
    display: flex;
    justify-content: start;
  }
  .box {
    width: 23%;
    padding: 10px;
    min-width: 100px;
    margin: 1%;
    border: 1px solid #ffb40500;
    border-radius: 5px;
    .flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .name {
      font-weight: 400;
      font-size: 16px;
      height: 100%;
      color: #000000;
    }
    .indoor {
      font-weight: 400;
      font-size: 14px;

      color: #636e78;
    }
  }
  .temp {
    background-color: #fffbee;
  }
  .hum {
    background-color: #eff8ff;
  }
  .co2 {
    background-color: #f3fff6;
  }
  .pm25 {
    background-color: #f3f1ff;
  }
  .illuminance {
    background-color: #fff4f2;
  }
}
.overview-img {
  width: 46px;
}
.label-flex {
  display: flex;
  align-items: center;
  img {
    margin-right: 5px;
  }
}
.select-temp {
  border: 1px solid #ffb405 !important;
  box-shadow: 0px 0px 6px #ffb405;
  .name {
    color: #ffb405 !important;
  }
}
.select-hum {
  border: 1px solid #5b92bd !important;
  box-shadow: 0px 0px 6px #5b92bd;
  .name {
    color: #5b92bd !important;
  }
}
.select-co2 {
  border: 1px solid #79b086 !important;
  box-shadow: 0px 0px 6px #79b086;
  .name {
    color: 79B086 !important;
  }
}
.select-pm25 {
  border: 1px solid #a57ce8 !important;
  box-shadow: 0px 0px 6px #a57ce8;
  .name {
    color: #a57ce8 !important;
  }
}
.select-illuminance {
  border: 1px solid #f8453a !important;
  box-shadow: 0px 0px 6px #f8453a;
  .name {
    color: #f8453a !important;
  }
}
</style>
